<script setup lang="ts">
import { computed } from 'vue'
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import { useAppStore } from '@/store/modules/app'
import { useI18n } from '@/hooks/web/use-i18n'
import { propTypes } from '@/utils/prop-types'
import { useDesign } from '@/hooks/web/use-design'
import { ElementPlusSize } from '@/types/element-plus'

const { getPrefixCls } = useDesign()

const prefixCls = getPrefixCls('size-dropdown')

defineProps({
  color: propTypes.string.def('')
})

const { t } = useI18n()

const appStore = useAppStore()

const sizeMap = computed(() => appStore.sizeMap)

const setCurrentSize = (size: ElementPlusSize) => {
  appStore.setCurrentSize(size)
}
</script>

<template>
  <el-dropdown :class="prefixCls" trigger="click" @command="setCurrentSize">
    <Icon :size="18" icon="svg-icon:fontsize" :color="color" class="cursor-pointer" />
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in sizeMap" :key="item" :command="item">
          {{ t(`size.${item}`) }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
